<template>
    <div class="GoodsInfo">
        <transition
            @before-enter="beforeEnter"
            @enter="enter"
            @after-enter="afterEnter"
        >
            <div class="ball" v-show="ballFlag" ref="ball"></div>
        </transition>
        <!-- 商品轮播图区域 -->
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <Swiper :lunbotuList="lunbotuList" :isFull="false"></Swiper>
                </div>
            </div>
        </div>
        <!-- 商品购买 -->
        <div class="mui-card">
            <div class="mui-card-header">{{goodsinfo.title}}</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p class="price">
                        市场价：<del>￥{{goodsinfo.old_price}}</del>&nbsp;&nbsp;销售价：<span class="now_price">￥{{goodsinfo.sell_price}}</span>
                    </p>
                    <div class="goumai">
                        <span>购买数量：</span>
                        <!-- numberbox子组件   -->
                        <NumberBox :max='goodsinfo.stock_quantity' @getCount="getSelectedCount"></NumberBox>
                    </div>
                    <p>
                        <mt-button style="width:100px;" type="primary" size="small">立即购买</mt-button>
                        <mt-button class="join_car" type="danger" size="small"  @click="addToShopCar">加入购物车</mt-button>
                        <!-- 分析： 加入购物车的时候，拿到选择的数量 -->
                        <!-- 1. 按钮属于goodsinfo页面，数字属于numberbox组件 -->
                        <!-- 2. 涉及了父子组件嵌套，所以无法直接在goodsinfo页面中获取到 选中商品的数量 -->
                        <!-- 3. 如何解决？：涉及到子组件向父组件传值问题（事件调用机制） -->
                        <!-- 4. 事件调用的本质：父向子传递方法，子调用这个方法，同时把数据当做参数传给这个方法 -->
                    </p>
                </div>
            </div>
        </div>
        <!-- 商品参数 -->
        <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>商品货号:{{goodsinfo.goods_no}}</p>
                    <p>库存情况:{{goodsinfo.stock_quantity}}</p>
                    <p>上架时间:{{goodsinfo.add_time}}</p>
                </div>
            </div>
            <div class="mui-card-footer">
                <mt-button type="primary" size="large" plain @click="Go_goods(goodsinfo.id)">图文介绍</mt-button>
                <mt-button type="danger" size="large" plain>商品评论</mt-button>
            </div>
        </div>
    </div>
</template>
<script>
import Swiper from '../subcomponents/swiper.vue'
import NumberBox from '../subcomponents/numberbox.vue'
export default {
    data(){
        return {
            GoodsId:this.$route.params.id,
            lunbotuList:[
                {img:"//cbu01.alicdn.com/img/ibank/2018/969/735/9174537969_1257766207.430x430xz.jpg"},
                {img:"//cbu01.alicdn.com/img/ibank/2019/438/758/10342857834_1257766207.430x430xz.jpg"},
                {img:"//cbu01.alicdn.com/img/ibank/2018/420/831/9584138024_1257766207.430x430xz.jpg"},
            ],
            goodsinfo:{
                // 假数据，真数据通过getGoodsInfoId()获取
                id:1,
                title:'厂家直销不锈钢密封罐 咖啡豆茶叶罐奶粉储物罐 密封罐四件套装',
                add_time:"2019-07-11 11:29:06",
                goods_no:"JX999",
                stock_quantity:300,
                old_price:16,
                sell_price:6
            },
            ballFlag:false, //控制小球显示与隐藏的标识符
            selectedCount:1 // 保证用户选中的商品数量，默认用户买一个
        }
    },
    created(){
        this.getGoodsInfoId();
    },
    methods:{
        getGoodsInfoId(){
            // 通过路由参数发送gei请求获取商品详情数据
            var goodslist = JSON.parse(localStorage.getItem('GoodsList'));
            goodslist.some(item=>{
                if(item.id == this.GoodsId){
                    this.goodsinfo = item;
                    this.lunbotuList.unshift({img:item.img_url});
                    return true;
                }
            })
        },
        Go_goods(id){
            this.$router.push({name:"Goods", params:id});
        },
        beforeEnter(el){
            el.style.transform = "translate(0, 0)";
            el.style.opacity = 1;
        },
        enter(el, done){
            el.offsetWidth;
            // 小球动画优化思路：
            // 分析导致动画不准确的原因：把小球最终位移到的位置写死了，局限在某一分辨率下滚动条未滚动的情况下
            // 只要分辨率和测试的时候不一样，或者滚动条有一定的滚动距离之后，问题就出现了
            // 所以：不能把位置的横纵坐标写死，应该根据不同情况动态计算这个小球终点坐标值
            // 如何动态获取小球终点坐标值：
            // 先得到购物车右上角的小徽标坐标，再得到小球坐标，然后求差值
            // 如何获取小球和徽标的位置   使用原生 domObject.getBoundingClientRect()

            // 获取小球的位置
            const ballPosition = this.$refs.ball.getBoundingClientRect();
            // 获取徽标在页面中的位置
            const badgePosition = document.getElementById('badge').getBoundingClientRect();
            // 计算两者的差值
            const xDist = badgePosition.left - ballPosition.left;
            const yDist = badgePosition.top - ballPosition.top;
            el.style.transform = `translate(${xDist}px, ${yDist}px)`;
            el.style.transition = "all .5s cubic-bezier(0.4, -0.3, 1 ,0.68)";
            done();
        },
        afterEnter(el){
            this.ballFlag = !this.ballFlag;
        },
        getSelectedCount(count){
            // 当子组件把选中的数量传递给父组件的时候，把选中的值保存到data上
            this.selectedCount = count;
            console.log(count);
        },
        getCount(){
            // 可以通过事件绑定机制，把子组件的数据传给父组件goodsinfo，也可以使用下面的这个mui提供JS API，直接获取numbox的值
           console.log(mui('.mui-numbox').numbox().getValue());
        },
        addToShopCar(){
            this.ballFlag=true;
            // 拼接处一个要保存到store中car数组的商品信息对象
            var goodsinfo = {
                id:this.goodsinfo.id,
                count: this.selectedCount, 
                price: this.goodsinfo.sell_price, 
                selected: true
            };
            // 调用store中的mutations内的addToCar方法
            this.$store.commit('addToCar',goodsinfo);
        }
    },
    components:{
        Swiper,
        NumberBox
    }
}
</script>
<style lang="scss">
.GoodsInfo{
    background-color: #eee;
    overflow: hidden;
    // 解决图片过大，在轮播图组件中实现，用绑定class属性，实现类的转换
    // img{
    //     display: block;
    //     margin: 0 auto;
    //     width: 50%;
    //     // height: 100%;
    // }
    .mui-card-header{
        font-weight: 700;
    }
    .join_car{
        margin-left: 5px;
        width:100px;
    }
    .now_price{
        color: red;
        font-size: 16px;
    }
    .goumai{
        margin: 10px 0;
        height: 35px;
        line-height: 35px;
    }
    .mui-numbox{
        display: inline-block;
    }
    // 去除该类的flex布局，使两个按钮换行
    .mui-card-footer{
        display: block;
        button{
            margin-bottom: 5px;
        } 
    }
    .ball{
        position: absolute;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: red;
        z-index: 10;
        left: 150px;
        top: 409px; 
    }
}
</style>


